<template>
  <div class="home-left">
    <div class="card-content">
      <div class="card-header-text card-header">
        业务类型
        <el-date-picker
          style="width: 30%"
          v-model="times"
          @change="changeywlxDate"
          type="year"
          format="YYYY"
          placeholder="选择年"
          clearable
        />
      </div>
      <ComLeftTop ref="comLeftTop" style="flex: 1"></ComLeftTop>
    </div>

    <div class="card-content" style="margin-top: 10px">
      <div class="card-header-text card-header">
        合同类型的占比总数
        <el-date-picker
          style="width: 30%"
          v-model="times1"
          @change="changeywlxDate1"
          type="year"
          format="YYYY"
          placeholder="选择年"
          clearable
        />
      </div>

      <ComLeftBottom ref="comLeftBottom" style="flex: 1"></ComLeftBottom>
    </div>
  </div>
</template>
<script setup lang="ts">
//@ts-ignore
import ComLeftTop from "@/views/dataScreen/component/ComLeftTop.vue";

//@ts-ignore
import ComLeftBottom from "@/views/dataScreen/component/ComLeftBottom.vue";
import { onMounted, ref } from "vue";
//@ts-ignore
import ComLeftCenter from "@/views/dataScreen/component/ComLeftCenter.vue";
//@ts-ignore
import { itemList } from "@/api/dataScreen/index.js";
import { ElMessage, ElMessageBox } from "element-plus";

const fmqdValue = ref("");
const comLeftTop = ref();
const comLeftCenter = ref();
const comLeftBottom = ref();

const options = ref([]);
const times = ref();
const times1=ref()

// 项目下拉
const itemData = async () => {
  const response = await itemList();
  if (response.code === 200) {
    options.value = response.data;
  } else {
    ElMessage.error(response.msg);
  }
};

// 业务类型时间选择
const changeywlxDate = function (date: any) {
  comLeftTop.value.getData(getFormateDate(date));
};
// 合同业务类型占卜
const changeywlxDate1=function (date: any) {
  comLeftBottom.value.getData(getFormateDate(date));
};

const getFormateDate = function (date: any) {
  if (!date) return "";
  const year = date.getFullYear();
  return year;
};

const handelProject = function (value) {
  comLeftBottom.value.getData(value);
};

onMounted(async () => {
  await itemData();
});
</script>
<style scoped lang="scss">
@import "../index.scss";
.home-left {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 50px - 39px);
  justify-content: space-evenly;

  .content-flex-center {
    margin: 10px 0;
  }
  .card-content {
    max-height: 42.5vh;
    flex: 0 0 42.5vh;
    display: flex;
    border-radius: 10px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
    flex-direction: column;
    overflow: hidden;

    .el-button + .el-button {
      margin-left: 0px;
    }
  }
}
</style>
